<script setup>
import SupervisorOne from './SupervisorOne.vue'
</script>

<template>
  <div class="si-bg">
    <div class="si-score">640</div>
    <div class="si-name">施工单位A 评分</div>
    <div class="si-list">
      <supervisor-one class="si-item-r" title="达标考评<br/>达标率" score="45%"></supervisor-one>
      <supervisor-one title="绩效考评<br/>百分制" score="45%"></supervisor-one>
      <supervisor-one class="si-item-r" title="日常打分<br/>扣分" score="45%"></supervisor-one>
      <supervisor-one title="不良行为<br/>扣分" score="45%"></supervisor-one>
    </div>
    <div class="si-split"></div>
  </div>
</template>



<style scoped>
.si-bg {
  margin: 26px 38px 0 38px;
  background: url("../assets/bg-unit-item2.png") no-repeat;
  background-size: 100% 100%;
  height: 327px;
  position: relative;
}
.si-score {
  width: 158px;
  height: 56px;
  font-size: 46px;
  font-family: DIN-Medium, DIN sans-serif;
  font-weight: 500;
  color: #fff;
  -webkit-background-clip: text;
  position: absolute;
  left: 28px;
  top: 107px;
  text-align: center;
}
.si-name {
  width: 66px;
  font-size: 14px;
  line-height: 20px;
  font-family: PingFang SC-Regular, PingFang SC sans-serif;
  font-weight: 500;
  color: #fff;
  -webkit-background-clip: text;
  position: absolute;
  left: 73px;
  top: 168px;
  text-align: center;
}
.si-list {
  position: absolute;
  top: 32px;
  left: 369px;
  display: flex;
  flex-wrap: wrap;
}
.si-item-r {
  margin-right: 270px;
}
.si-split {
  position: absolute;
  top: 27px;
  left: 949px;
  width: 53px;
  height: 254px;
  background: url("../assets/bg-unit-split.png") no-repeat;
  background-size: 100% 100%;
}
</style>